@use '../mixins/mixins' as mixins;

.lf-messenger {
  & {
    @include mixins.lf-root();
  }

  &__placeholder {
    & {
      @include mixins.lf-el-stretch;
      background: rgb(var(--lf-color-bg));
      color: rgb(var(--lf-color-on-bg));
      font-family: var(--lf-font-family-primary);
      font-size: var(--lf-font-size);
      left: 0;
      position: absolute;
      text-align: center;
      top: 0;
      z-index: 2;
      justify-self: center;
    }

    &--hidden {
      display: none;
    }
  }

  &__widget {
    @include mixins.lf-el-stretch;
  }
}
